<template>
    <div>
        <h1>会员添加</h1>
        <table>
            <thead>
                <tr>
                    <td>会员名称</td>
                    <td>
                        <input type="text" v-model="data.Name">
                    </td>
                </tr>
                <tr>
                    <td>会员密码</td>
                    <td>
                        <input type="password" v-model="data.Password">
                    </td>
                </tr>
                <tr>
                    <td>会员性别</td>
                    <td>
                        <input type="radio" v-model="data.Sex" name="sex" value="1">男
                        <input type="radio" v-model="data.Sex" name="sex" value="2">女
                    </td>
                </tr>
                <tr>
                    <td>会员日期</td>
                    <td>
                        <input type="date" v-model="data.Birthday">
                    </td>
                </tr>
                <tr>
                    <td>会员手机号</td>
                    <td>
                        <input type="text" v-model="data.PhoneNumber">
                    </td>
                </tr>
                <tr>
                    <td>会员年龄</td>
                    <td>
                        <input type="text" v-model="data.Age">
                    </td>
                </tr>
                <tr>
                    <td>会员状态</td>
                    <td>
                        <input type="checkbox" v-model="data.State">勾选表示开启，不勾选表示关闭
                    </td>
                </tr>
                <tr>
                    <td>会员等级编号</td>
                    <td>
                        <select v-model="data.MemberLevelId">
                            <option value="0">请选择</option>
                            <option v-for="b in  datalist" :value="b.DId">{{b.Dname}}</option>
                            
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>头像</td>
                    <td>
                        <input type="file" @change="shang">
                        <img :src="'https://localhost:7157/'+data.Img" style="height: 100px; width: 100px;">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="保存" @click="add">
                    </td>
                </tr>

            </thead>
        </table>
        <a href="/">会员显示列表</a>
    </div>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//实例化】
const router=useRouter();

//model
const data=ref({
  "HId": 0,
  "Name": "",
  "Password": "",
  "Sex": 0,
  "Birthday": "",
  "PhoneNumber": "",
  "Age": 0,
 // "IsDelete": true,
  //"CreateDate": "",
  "State": false,
  "MemberLevelId": 0,
  "Img": ""
});
//下拉框
const datalist=ref( [ {
    "DId": 0,
    "Dname": ""
  }]);
//钩子函数
onMounted(()=>{
    xlk();
})
//下拉框绑定
const xlk=()=>{
    axios.get("https://localhost:7157/api/Hui/xlk").then(res=>{
        datalist.value=res.data;
    })
}
//图片上传
const shang=(e:any)=>{
    var n=e.target.files[0];
    var fn=new FormData();
    fn.append("file",n);
    debugger

    //图片格式
    //第一图片大小
    if(n.size>1024*1024*2)
    {
        alert("图片大于2MB");
        return;
    }
    //第二只能用png|jpg格式上传
    if(n.type!="image/png" && n.type!="image/jpg")
    {
        alert("只能用png|jpg格式上传");
        return;
    }
    axios.post("https://localhost:7157/api/info",fn).then(res=>{
        data.value.Img=res.data;
    })
}
//添加
const add=()=>{
    debugger
    axios.post("https://localhost:7157/api/Hui/AddHui",data.value).then(res=>{
        if(res.data>0)
        {
            alert("添加成功");
            router.push({path:"/"});
        }
        else
        {
            alert("添加失败");
        }
    })
}



</script>

<style scoped>

</style>